<!DOCTYPE HTML>
<html>
<head>
    <title>首页</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <!--&lt;!&ndash;获得更好的响应式支持&ndash;&gt;-->
    <!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
    <!-- 直接通过浏览器访问界面-->
    <!--引用vue.js-->
    <!--<script type="text/javascript" src="./static/vue/vue.min.js"></script>
    &lt;!&ndash;引用axios&ndash;&gt;
    <script type="text/javascript" src="./static/axios/axios.min.js"></script>
    &lt;!&ndash;引入element核心css样式&ndash;&gt;
    <link rel="stylesheet" href="./static/element-ui/index.css">
    &lt;!&ndash;引入element的js文件&ndash;&gt;
    <script type="text/javascript" src="./static/element-ui/index.js"></script>-->

    <!-- 直接通过开发工具访问界面-->
    <script type="text/javascript" src="../static/vue/vue.min.js"></script>
    <!--引用axios-->
    <script type="text/javascript" src="../static/axios/axios.min.js"></script>
    <!--引入element核心css样式-->
    <link rel="stylesheet" href="../static/element-ui/index.css">
    <!--引入element的js文件-->
    <script type="text/javascript" src="../static/element-ui/index.js"></script>

</head>
<div id="app">

    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">处理中心</el-menu-item>
        <el-menu-item index="2" disabled>我的工作台</el-menu-item>
        <el-menu-item index="3" disabled>消息中心</el-menu-item>
        <el-menu-item index="4"><a href="http://baidu.dbcndh.com/" target="_blank">百度</a></el-menu-item>
        <el-menu-item index="5"><a href="https://fanyi.baidu.com/translate?aldtype=16047&query=&keyfrom=baidu&smartresult=dict&lang=auto2zh#auto/zh/" target="_blank">百度翻译</a></el-menu-item>
    </el-menu>
    <!--处理中心界面-->
    <template>
        <el-row :gutter="20" style="margin-left:0px;margin-right: 0px">
            <el-col :span="6">
                地区
                <el-select v-model="address" clearable placeholder="请选择">
                    <el-option
                            v-for="item in addressList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="6">
                部门
                <el-select v-model="dept" multiple placeholder="请选择">
                    <el-option
                            v-for="item in deptList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="6">
                <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>
            </el-col>
        </el-row>
        <template>
            <el-tabs v-model="activeName" v-show="show" type="card" @tab-click="handleClick">
                <el-tab-pane label="工资总表"  name="first">
                    <el-table :data="tableData" style="width: 100%;font-style: initial">
                        <el-table-column fixd="left" width="80px" label="需要手动更新">
                            <el-table-column fixd="left" width="80px" label="工资周期">
                                <el-table-column prop="province" fixd="left" width="80px" label="序号"></el-table-column>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="">
                            <el-table-column :label= loggingkaishi >
                                <el-table-column width="110" prop="province" label="姓名"></el-table-column>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="">
                            <el-table-column :label= loggingjieshu >
                                <el-table-column prop="province" width="110" label="公司"></el-table-column>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="">
                            <el-table-column label="本城市最低工资">
                                <el-table-column prop="province" width="120" label="一级部门"></el-table-column>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="">
                            <el-table-column label= "2320" >
                                <el-table-column prop="province" width="110" label="二级部门"></el-table-column>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="">
                            <el-table-column label= "2320" >
                                <el-table-column prop="province" width="110" label="二级部门"></el-table-column>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="">
                            <el-table-column label= "2320" >
                                <el-table-column prop="province" width="110" label="三级部门"></el-table-column>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="">
                            <el-table-column label= "2320" >
                                <el-table-column prop="province" width="110" label="职位"></el-table-column>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column prop="date" width="80"  label="身份证"></el-table-column>
                        <el-table-column prop="date" width="80"  label="银行卡号"></el-table-column>
                        <el-table-column prop="date" width="80"  label="开户行"></el-table-column>
                        <el-table-column prop="date" width="80"  label="员工状态"></el-table-column>
                        <el-table-column prop="date" width="80"  label="考核状态"></el-table-column>
                        <el-table-column prop="date" width="80"  label="员工类型"></el-table-column>
                        <el-table-column prop="date" width="80"  label="入职时间"></el-table-column>
                        <el-table-column prop="date" width="120"  label="考核期通过日期"></el-table-column>
                        <el-table-column prop="date" width="80"  label="离职日期"></el-table-column>

                        <el-table-column label="配送信息">
                            <el-table-column
                                    prop="name"
                                    label="姓名">
                            </el-table-column>
                            <el-table-column label="地址">
                                <el-table-column
                                        prop="province"
                                        label="省份">
                                </el-table-column>
                                <el-table-column
                                        prop="city"
                                        label="市区">
                                </el-table-column>
                                <el-table-column
                                        prop="address"
                                        label="地址">
                                </el-table-column>
                                <el-table-column
                                        prop="zip"
                                        label="邮编">
                                </el-table-column>
                            </el-table-column>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>


                <el-tab-pane label="大区—团队管理者" name="second">

                    大区----团队管理者

                </el-tab-pane>
                <el-tab-pane label="工作量汇总" name="third">

                    工作量汇总

                </el-tab-pane>
            </el-tabs>
        </template>
    </template>
</div>
</html>
<script>

    var app = new Vue({
        el: "#app",
        data: {
            //这是用户的json对象
            user: {},
            //登陆状态 boolean
            islogging: false,
            //登陆中的用户
            loggingkaishi: "2020/09/01",
            loggingjieshu: "2020/09/30",
            activeName: 'first',
            activeIndex: '1',
            activeIndex2: '1',
            show: true,
            addressList: [{
                value: '北京',
                label: '北京'
            }, {
                value: '国贸',
                label: '国贸'
            }, {
                value: '辽宁',
                label: '辽宁'
            }],
            deptList: [{
                value: '管理部门',
                label: '管理部门'
            }, {
                value: '销售部',
                label: '销售部'
            }, {
                value: '财务部',
                label: '财务部'
            }],
            address: '',
            dept: [],
            tableData: [{
                date: '2016-05-03',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-02',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-04',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }]
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            handleSelect(key, keyPath) {
                if (key === "1") {
                    this.show = true
                }
                if (key === "2") {
                    this.show = false
                }
            },
            search () {
                axios.post(location.origin+"/study/user/list", {
                    address: this.address,
                    dept: this.dept.toString()
                }).then(
                    function (res) {
                        console.log(res);
                        //状态码为100则登陆成功
                        if(res.data.status==100) {
                            //登陆成功，将用户名存入localStorage
                            localStorage.setItem("user", res.data.loginUser.username);
                            //刷新页面 为了使v-show的内容显示出来
                            location.reload();
                            alert(res.data.message);
                            //    跳转页面到员工列表
                            location.href="empList.html";
                        }

                    }
                )
            },
            //登陆的方法
            login() {
                console.log("--------created")
                axios.post(location.origin+"/study/user/login", {
                    username: this.user.username,
                    password: this.user.password
                }).then(
                    function (res) {
                        console.log(res);
                        //状态码为100则登陆成功
                        if(res.data.status==100) {
                            //登陆成功，将用户名存入localStorage
                            localStorage.setItem("user", res.data.loginUser.username);
                            //刷新页面 为了使v-show的内容显示出来
                            location.reload();
                            alert(res.data.message);
                            //    跳转页面到员工列表
                            location.href="empList.html";
                        }

                    }
                )
            },
            //退出登陆
            logout() {
                console.log("--------created")
                localStorage.removeItem("user");
                location.reload();
                alert("已经退出登陆");
                //退出登陆时应该返回登陆页面
                location.href="login.html";
            }
        },
        created() {
            axios.post(location.origin+"/study/user/list", {
                address: this.address,
                dept: this.dept.toString()
            }).then(
                function (res) {
                    console.log(res);
                    //状态码为100则登陆成功
                    if(res.data.status==100) {
                        alert(res.data.message);
                    }
                }
            )
        }
    })

</script>
<style type="text/css" scoped="scoped">
    .el-row {
        margin-bottom: 20px;
    &:last-child {
         margin-bottom: 0;
     }
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>